<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <hr>

    <p>count 值：{{ count }}</p>
    <p>money 值：{{ money }}</p>
    <p>购物车  {{ cartList }}</p>
    <p>总价  {{ totalPrice }}</p>
    <button @click="addOne" class="btn btn-warning">+1</button>
    <button @click="addCount(10)" class="btn btn-warning">+10</button>
    <button @click="reqCartList" class="btn btn-warning">发请求</button>
  </div>
</template>

<script>

// 导入辅助函数
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Right',
  computed: {
    // count () {
    //   return this.$store.state.count
    // },
    // money () {
    //   return this.$store.state.money
    // },
    // 下面这句话，相当于帮你生成上面的两段计算属性
    ...mapState(['count', 'money', 'cartList']),
    ...mapGetters(['totalPrice'])
  },

  methods: {
    // addOne () {
    //   this.$store.commit('addOne')
    // },
    // addCount (num) {
    //   this.$store.commit('addCount', num)
    // },
    // 下面这一句话相当于生成了上面两段
    ...mapMutations(['addOne', 'addCount']),
    ...mapActions(['reqCartList'])
  }
}
</script>

<style>
</style>
